<template>
  <Card>
    <Form 
      ref="formValidate" 
      :model="formValidate" 
      :rules="ruleValidate" 
      :label-width="80"
    >
      <Form-item 
        label="账号" 
        prop="Name"
      >
        <Input 
          v-model="formValidate.Name" 
          disabled
        ></Input>
      </Form-item>
      <Form-item 
        label="姓名" 
        prop="Abbr"
      >
        <Input 
          v-model="formValidate.Abbr" 
          placeholder="请输入" 
          @on-enter="asyncOK()"
        ></Input>
      </Form-item>
      <Form-item 
        label="性别" 
        prop="Sex"
      >
        <Radio-group v-model.number="formValidate.Sex">
          <Radio :label="0">男</Radio>
          <Radio :label="1">女</Radio>
        </Radio-group>
      </Form-item>
      <Form-item 
        label="职业" 
        prop="Expert"
      >
        <Input 
          v-model="formValidate.Expert" 
          placeholder="请输入" 
          @on-enter="asyncOK()"
        ></Input>
      </Form-item>
      <Form-item 
        label="职务" 
        prop="Job"
      >
        <Input 
          v-model="formValidate.Job" 
          placeholder="请输入" 
          @on-enter="asyncOK()"
        ></Input>
      </Form-item>
      <Form-item 
        label="电话" 
        prop="Phone"
      >
        <Input 
          v-model="formValidate.Phone" 
          placeholder="请输入" 
          @on-enter="asyncOK()"
        ></Input>
      </Form-item>
      <Form-item 
        label="Email" 
        prop="Email"
      >
        <Input 
          v-model="formValidate.Email" 
          placeholder="请输入" 
          @on-enter="asyncOK()"
        ></Input>
      </Form-item>
      <Form-item label="照片上传">
        <Row>
          <i-col span="12">
            <Upload 
              ref="upload" 
              :on-success="handleSuccess" 
              :format="['jpg','jpeg','png']" 
              :max-size="2048" 
              :on-format-error="handleFormatError" 
              :on-exceeded-size="handleMaxSize" 
              :on-remove="handleRemove" 
              :before-upload="handleBeforeUpload" 
              type="drag" 
              :action="actionUrl"
            >
              <div style="padding: 20px 0">
                <Icon 
                  type="ios-cloud-upload" 
                  size="52" 
                  style="color: #3399ff"
                />
                <p>点击或将文件拖拽到这里上传（仅限于mp4、flv格式文件）</p>
              </div>
            </Upload>
          </i-col>
          <i-col 
            v-if="formValidate.Photo" 
            span="12"
          >
            <div class="demo-upload-list">
              <img 
                :src="imgUrl" 
                class="upload-img"
              >
            </div>
          </i-col>
        </Row>
      </Form-item>
      <Form-item 
        label="介绍" 
        prop="remark"
      >
        <Input 
          v-model="formValidate.remark" 
          type="textarea" 
          :autosize="{minRows: 2,maxRows: 5}" 
          placeholder="请输入..."
        ></Input>
      </Form-item>
      <Form-item>
        <Button 
          type="primary" 
          @click="handleSubmit('formValidate')"
        >提交</Button>
        <Button 
          type="primary" 
          style="margin-left: 8px" 
          @click="handleReset('formValidate')"
        >重置</Button>
      </Form-item>
    </Form>
  </Card>
</template>

<script>
import { SERVER_CPT_URL, V_ROOT } from '@/api/config';
export default {
  data () {
    return {
      formValidate: {
        Name: '',
        Abbr: '',
        Sex: 1,
        Expert: '教师',
        Job: '班主任',
        Photo: '../../assets/default.jpg',
        Phone: '13900000000',
        Email: '',
        remark: ''
      },
      ruleValidate: {
        Name: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        Email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    userInfo () {
      return this.$store.state.app.userInfo;
    },
    state () {
      return this.$store.state.app;
    },
    actionUrl () {
      return SERVER_CPT_URL + '/upload/PhotoUpload?token=' + this.state.token;
    },
    imgUrl () {
      if (!this.state.userInfo.Photo) {
        return '/static/img/default.jpg';
      } else {
        return V_ROOT + '/' + this.state.userInfo.Photo;
      }
    }
  },
  watch: {
    // console.log(this.state.userInfo)
    userInfo () {
      // console.log(this.state.userInfo);
      if (this.state.userInfo) {
        this.formValidate = this.state.userInfo;
      }
    }
  },
  mounted () {
    this.formValidate = this.state.userInfo;
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$api.UpdateUserProf(this.formValidate).then(
            res => {
              if (!res.error) {
                this.$store.dispatch('getUserInfo');
                this.$Message.success(res.message);
              } else {
                this.$Message.error(res.message, 4);
              }
            },
            err => {
              this.$Message.error(err, 4);
            }
          );
        } else {
          this.$Message.error('表单验证失败!');
        }
      });
    },
    handleReset (name) {
      this.VideoCancel();
      this.$store.dispatch('getUserInfo');
      this.formValidate = this.state.userInfo;
    },
    VideoCancel () {
      let row = {
        Url: this.formValidate.Photo
      };
      if (this.isUpload) {
        this.$api.PhotoCancel(row).then(res => {
          console.log('ok');
        });
      }
      //        this.formValidate.Img='http://192.168.1.139/live/time.jpg'
      this.$refs['upload'].clearFiles();
      this.$refs['formValidate'].resetFields();
      //        if(!this.formValidate.Photo){
      //          return
      //        }
      this.isUpload = false;
    },
    handleRemove (file) {
      // 从 upload 实例删除数据
      this.VideoCancel();
      //        const fileList = this.$refs.upload.fileList;
      //        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess (res, file) {
      // 因为上传过程为实例，这里模拟添加 url
      //        this.$Notice.warning({
      //          title: '超出文件大小限制',
      //          desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      //        });
      console.log(res, file);
      this.isUpload = true;
      //        this.imgName=res.jdata.Img
      //        this.imgName='http://192.168.1.139/live/520414a01d54b32f47eec151f5475dbf/imag/e9fe9995e0c3f3d828db0931d955d9d3.jpg'
      //        this.formValidate.Title=res.jdata.Title
      //        this.formValidate.Img=this.imgName
      this.formValidate.Photo = res.jdata;
      //        file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
      //        file.name = '7eb99afb9d5f317c912f08b5212fd69a';
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc:
          '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      });
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      });
    },
    handleBeforeUpload () {
      const check = this.$refs.upload.fileList < 2;
      //        console.log(check)
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 1张图片。'
        });
      }
      return check;
    }
  }
};
</script>
